<template>
	<view class="content">
		<view class="bigBox">
			<view class="tipBox">
				<text>Hi，请选择登录方式！</text>
			</view>
			<view class="bindBtn">
				<button @tap="login" data-eventsync="true" style="margin-top: 10px;">抖音授权登录</button>
				<button @click="goto" style="margin-top: 10px;">手机号登录</button>

			</view>
			<view class="bindBtn">
				<checkbox-group @change="checkPrivacy">
					<label>
						<checkbox value="true" :checked="checkPrivacyFlag" />
						<text class="checkPrivacy" style="margin-left: 10px;">我已阅读并同意</text><text @click="openWebView"
							class="checkPrivacy"
							style="margin: 0;padding: 0;text-decoration: underline;">《用户隐私协议》</text>
					</label>
				</checkbox-group>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		setInfo,
		parseUserData
	} from '../../hook/auth.js'
	import api from '../../api/api.js'
	export default {
		data() {
			return {
				checkPrivacyFlag:false
			}
		},
		methods: {
			login() {
				const self = this
				if (!this.checkPrivacyFlag) {
					uni.showToast({
						title: "同意用户隐私协议后才能登录",
						icon: "none"
					})
					return
				} else {
					tt.getUserProfile({
					  success(res) {
					    console.log("getUserProfile 调用成功：", res.userInfo);
						self.goto()
					  },
					  fail(res) {
					    console.log("getUserProfile 调用失败", res);
					  },
					});

				}
			},
			goto(){
				uni.navigateTo({
					url:"/pages/index/login"
				})
			},
			//查看隐私政策
			openWebView(e) {
				uni.navigateTo({
					url: '/pages/components/webview?url=https://www.pencil-stub.com/html/applet/privacy_agreement.html'
				})

			},
			//同意隐私政策
			checkPrivacy() {
				this.checkPrivacyFlag = !this.checkPrivacyFlag
			},
		},

		mounted() {
			this.userData = parseUserData()
		}
	}
</script>

<style scoped>
	.code .waitTime {
		color: rgba(166, 166, 166, 1);
	}

	.code .getText {
		cursor: pointer;
		position: absolute;
		right: 40px;
		top: calc(50%);
		transform: translateY(-50%);
		font-size: 18px;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		z-index: 999;
	}

	.code {
		position: relative;
	}

	.tipBox1 text {
		display: block;
	}

	.tipBox1 {
		width: 90%;
		height: 100px;
		padding-top: 50px;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
		text-align: center;
		margin: 0 auto;
		line-height: 20px;
		margin-top: 100px;
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
	}

	.register {
		text-decoration: underline;
		color: rgba(166, 166, 166, 1);
	}

	.switchBox {
		margin-top: 30px;
		text-align: right;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.bindBtn button {
		width: 100%;
		height: 56px;
		border-radius: 32px;
		background: rgba(18, 205, 217, 1);
		line-height: 56px;
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.bindBtn {
		margin-top: 20px;
	}

	.inputBox input {
		width: 100%;
		height: 55px;
		padding: 0 16px;
		box-sizing: border-box;
		background: transparent;
		border: 1px solid rgba(18, 205, 217, 1);
		border-radius: 25px;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.12px;
		color: rgba(255, 255, 255, 1);

	}

	.inputBox text,
	.checkPrivacy {
		font-size: 12px;
		font-weight: 500;
		margin-left: 16px;
		color: rgba(235, 235, 239, 1);
	}

	.inputBox {
		margin-top: 40px;
	}

	.tipBox .tip2 {
		display: block;
		margin-top: 8px;
		font-size: 12px;
		color: rgba(166, 166, 166, 1);
	}

	.tipBox text {
		font-size: 16px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.tipBox {
		width: 100%;
	}

	.bigBox {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
		margin: 0 auto;
		width: calc(100% - 50px);
	}

	.content {
		width: 100%;
		height: 100vh;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>